<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>02 - OL4加载天地图WMTS服务展示地图</title>
    <script src='../lib/ol4/ol4.js'></script>
    <!--    <script src='../lib/ol6.14.1/ol.js'></script>-->
    <script src='../lib/proj4/proj4.js'></script>
    <!--        <link rel="stylesheet" href="../css/ol4/ol.css">-->
    <link rel='stylesheet' href='../css/ol6.14.1/ol.css'>
    <link rel='stylesheet' href='../css/main.css'>
    <style>
        .change-btn {
            position: absolute;
            top: 20px;
            left: 100px;
        }
    </style>
</head>
<body>
<div id='map'></div>
</body>
<script>
	const projection = ol.proj.get('EPSG:4326');
	const tileSize = 256;
	const projectionExtent = projection.getExtent();
	const origin = [-180.0, 90.0];
	const size = ol.extent.getWidth(projectionExtent) / tileSize;
	let resolutions = [];
	let matrixIds = [];
	for (let z = 0; z < 19; ++z) {
		resolutions[z] = size / Math.pow(2, z);
		matrixIds[z] = z;
	}

	const xyzSource = new ol.source.XYZ({
		// url:`http://192.168.108.95:8080/scgis/roadmap?level=${z}&col=${x}&row=${y}`,
		url: `http://192.168.108.95:8080/scgis/roadmap/{z}/{x}/{y}`,
		wrapX: false,
		tileUrlFunction: function (coordinate) {
			console.log(coordinate);
			// return `http://192.168.108.95:8080/scgis/roadmap?level=${coordinate[0]}&col=${coordinate[1]}&row=${(-coordinate[2] - 1)}`
			return `http://192.168.108.95:8080/scgis/satellite?level=${coordinate[0]}&col=${coordinate[1]}&row=${(-coordinate[2] - 1)}`
		},
	});
	// 图层
	const cvaBaseLayer = new ol.layer.Tile({
		source: xyzSource,
	});
	// 120.0230269151, 30.2856519116
	const points = [
		[0, 0],
		[114.046298, 30.764791],
	];
	const centerPoint = points[1];

	const iconFeature = new ol.Feature({
		geometry: new ol.geom.Point(centerPoint),
	});

	const imageStyle = new ol.style.Icon({
		anchor: [10, 26],
		anchorXUnits: 'pixels',
		anchorYUnits: 'pixels',
		src: '../image/icon.png',
		rotation: 30 * Math.PI / 180,
	});

	const iconStyle = new ol.style.Style({
		image: imageStyle,
	});

	iconFeature.setStyle(iconStyle);

	const vectorSource = new ol.source.Vector({
		features: [iconFeature],
		wrapX: false,
	});

	const iconLayer = new ol.layer.Vector({
		source: vectorSource,
	});

	const map = new ol.Map({
		layers: [
			cvaBaseLayer,
			iconLayer,
		],
		target: 'map',
		view: new ol.View({
			center: centerPoint,
			projection,
			zoom: 6,
		}),
	});
</script>
</html>
